/**
 * 字典管理 - 规则
 * @author xiaoxujs
 */

import { useCallback, useEffect, useState } from "react";
import { DicManagedEventBox, DicManagemedEventItem, DicManagemedEventUl, RolePageHeaderBox } from "./style";
import { INoFenye } from "../../../../type/common";
import { useLocation } from "react-router-dom";
import { postSyhtDictRuleItemSelectDictRuleItemList, postSyhtDictRuleItemUpdateRuleItem } from "../../../../api/ConfigManagement/DicManaged/DicManagedRuleApi";
import { ISyhtDictRuleItemSelectDictRuleItemList } from "../../../../type/ConfigManagement/DicManaged/DicManagedRule";

const DicManagedRule = () => {
    const location = useLocation() as {
        state: {
            ruleId: string,
        }
    }

    const [listData, setListData] = useState<ISyhtDictRuleItemSelectDictRuleItemList[]>([]); // 列表数据
    const [changeListData, setChangeListData] = useState<ISyhtDictRuleItemSelectDictRuleItemList[]>([]); // 列表数据
    const listFun = useCallback(
        async (params: { ruleId: string }) => {
            const { code, msg, data } = await postSyhtDictRuleItemSelectDictRuleItemList(params) as INoFenye<ISyhtDictRuleItemSelectDictRuleItemList>;
            if (code === 200) {
                setListData(JSON.parse(JSON.stringify(data)))
                setChangeListData(JSON.parse(JSON.stringify(data)));
            } else {
                setListData([])
                alert(msg)
            }

        },
        [],
    )

    useEffect(() => {
        const param = {
            ruleId: location.state.ruleId,
        }
        listFun(param)
    }, [listFun, location.state.ruleId])



    // 修改
    const handleChangeInput = (value: string, id: string) => {
        let arr = [...changeListData];
        arr.forEach(item => {
            if (item.id === id) {
                item.bitValue = value;
            }
        })
        setChangeListData(arr)
    }
    // 提交
    const handleSubmit = (item: ISyhtDictRuleItemSelectDictRuleItemList) => {
        listData.forEach(element => {
            if ((element.id === item.id) && (element.bitValue !== item.bitValue)) {

                const param = {
                    id: item.id,
                    bitValue: item.bitValue,
                    bitNum: item.bitNum,
                    ruleId: location.state.ruleId,
                }
                    ; (async () => {
                        const { code, msg } = await postSyhtDictRuleItemUpdateRuleItem(param) as { code: number, msg: string };
                        if (code === 200) {
                            alert('修改成功');
                            listFun({ ruleId: location.state.ruleId })
                        } else {
                            alert(msg)
                        }
                    })();

            }
        });


    }
    return (
        <DicManagedEventBox>
            <RolePageHeaderBox>
                <div className="left">
                    <div className="left_left_jiantou"></div>
                    <div>全部列表</div>
                    <div className="left_right_jiantou"></div>
                </div>
            </RolePageHeaderBox>
            <DicManagemedEventUl>
                {
                    changeListData.map((item, index) => {
                        return <DicManagemedEventItem key={item.id} $rightRem={index % 2 === 0 ? '18.9rem' : ''}>
                            <div className="title">
                                <span>{item.bitNum}</span>
                            </div>
                            <div className="button_box">
                                <input value={item.bitValue} onChange={(e) => handleChangeInput(e.target.value, item.id)} onBlur={() => handleSubmit(item)} />
                            </div>
                        </DicManagemedEventItem>
                    })
                }

            </DicManagemedEventUl>
        </DicManagedEventBox>
    )
}

export default DicManagedRule;